/**
 * Created by zzc on 2017/11/27
 */

'use strict'

import React, {Component} from 'react';

import {
    View,
    Text,
    TextInput,
    StyleSheet,
    Image
} from 'react-native';

import Swiper from 'react-native-swiper';
import {deviceWidth} from "../util/ScreenUtil";


export default class BannerComponent extends Component {

    constructor(props) {
        super(props);
        this.state = {
            onRefresh: false,
            swiperShow:false,
        };
    }

    componentDidMount(){
        setTimeout(()=>{
            this.setState({swiperShow:true});
        },0)
    }

    _renderSwiper=()=>{
        if(this.state.swiperShow){
            return (
                <Swiper
                    height={180}
                    loop={true}
                    index={0}
                    autoplay={false}
                    horizontal={true}
                    paginationStyle={{bottom: 10}}
                    autoplayTimeout={2}
                    activeDotColor="#ffffff">
                    <Image source={require('../../resource/images/page1.jpg')} style={styles.image}/>
                    <Image source={require('../../resource/images/page2.jpg')} style={styles.image}/>
                    <Image source={require('../../resource/images/page3.jpg')} style={styles.image}/>
                </Swiper>
            );
        }else {
            return <View style={{height:180}}></View>;
        }
    }

    render() {
        return (
            <View>
                {this._renderSwiper()}
            </View>
        );
    }
}

const styles = StyleSheet.create({
    image: {
        height: 200,
        width: deviceWidth,
    },
});